<template>
  <div>
    <h2>{{ msg}}</h2>
    <h2>{{ msg.split("").reverse().join("") }}</h2>
    <h2>computed:{{ reMsg}}</h2>
    <h2>method:{{ reMsgF()}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsgF() }}</h2>
    <h2>{{ reMsgF() }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>

<script>
  import { computed, ref, watch } from "vue";
export default {
  setup() {
    const msg = ref("hello vue");
    const reMsg = computed(() => {
      console.log("computed触发");
      return msg.value.split("").reverse().join("");
    });
    const reMsgF = () => {
      console.log("methods触发");
      return msg.value.split("").reverse().join('');
    };
    watch(msg, (newValue, oldValue) => {
      console.log(`旧值是：${oldValue}, 新值是：${newValue}`);
    });
    return {
      msg,
      reMsg,
      reMsgF,
    };
  },
};
</script>


<style>

</style>
